<template>
  <echartsView :loading="loading" :options="options" height="260px"></echartsView>
</template>

<script>
import { echartsView } from '@/components'
import moment from 'moment'
export default {
  components: {
    echartsView
  },
  props: {
    data: {
      required: true,
      type: Object,
      default: () => {}
    }
  },
  watch: {
    data: {
      deep: true,
      immediate: true,
      handler (n) {
        if (!this.$isEmpty(n)) {
          this.setOptions()
        }
      }
    }
  },
  data () {
    return {
      loading: false,
      options: {
        color: ['#2478f2', '#84b7f9'],
        title: {
          text: '未来申报人数预测',
          top: '16px',
          left: '16px',
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '8%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          splitLine: { show: false },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#fff'
          }
        },
        yAxis: {
          type: 'category',
          splitLine: { show: false },
          axisTick: {
            show: false
          },
          data: [],
          axisLabel: {
            color: '#fff'
          }
        },
        series: [
          {
            name: '未来申报人数预测',
            type: 'bar',
            data: []
          }
        ]
      }
    }
  },
  methods: {
    setOptions () {
      this.loading = true
      this.options.yAxis.data = []
      this.options.series[0].data = []
      // eslint-disable-next-line camelcase
      const { Module_5 } = this.data
      Module_5.forEach((e) => {
        this.options.yAxis.data.push(moment(e.Name).format('MM/DD'))
        this.options.series[0].data.push(e.Count)
      })
      this.loading = false
    }
  }
}
</script>
<style scoped>
</style>
